<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>诗词评论</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./index.css">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B4513',
            secondary: '#D2691E'
          },
          borderRadius: {
            'none': '0px',
            'sm': '2px',
            DEFAULT: '4px',
            'md': '8px',
            'lg': '12px',
            'xl': '16px',
            '2xl': '20px',
            '3xl': '24px',
            'full': '9999px',
            'button': '4px'
          }
        }
      }
    }
  </script>
  <style>
    body {
      font-family: 'Noto Serif SC', serif;
      min-height: 1024px;
      background-image: url('https://ai-public.mastergo.com/ai/img_res/8ea7dcda982c18394589a0bbf3f00a6b.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }

    .bjzp {
      position: fixed;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      margin-top: 40px;
      display: none;
    }

    .ai-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #8B4513;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .ai-avatar i {
      color: white;
      font-size: 1.2rem;
    }
  </style>
</head>

<body class="bg-white bg-opacity-95">
  <div class="max-w-[1440px] mx-auto min-h-[1024px] relative">
    <header class="fixed top-0 left-0 right-0 bg-white bg-opacity-95 shadow-sm z-50">
      <div class="max-w-[1440px] mx-auto px-8 h-16 flex items-center justify-between">
        <div class="flex items-center gap-5">
          <button class="text-primary hover:text-secondary transition-colors!rounded-button flex items-center gap-2"
            id="kh66">
            <i class="fas fa-arrow-left"></i>
            <span>返回</span>
          </button>
        </div>
        <h1 class="text-xl font-medium">诗词评论</h1>
        <div class="flex items-center gap-4">
        </div>
      </div>
    </header>
    <main class="pt-24 px-8 pb-32">
      <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-sm p-8 mb-8" id="plq">
        <!-- <div class="text-center mb-6">
          <h2 class="text-2xl font-medium mb-2">春江花月夜</h2>
          <p class="text-gray-600">张若虚</p>
        </div>
        <div class="text-lg leading-loose text-center mb-6">
          春江潮水连海平，海上明月共潮生。<br>
          滟滟随波千万里，何处春江无月明。<br>
          江流宛转绕芳甸，月照花林皆似霰。<br>
          空里流霜不觉飞，汀上白沙看不见。<br>
          江天一色无纤尘，皎皎空中孤月轮。<br>
          江畔何人初见月？江月何年初照人？<br>
          人生代代无穷已，江月年年望相似。<br>
          不知江月待何人，但见长江送流水。<br>
        </div>
        <div class="flex justify-center gap-4">
          <button class="flex items-center gap-2 text-primary hover:text-secondary transition-colors !rounded-button">
            <i class="far fa-heart"></i>
            <span>收藏</span>
          </button>
          <button class="flex items-center gap-2 text-primary hover:text-secondary transition-colors !rounded-button">
            <i class="far fa-share-square"></i>
            <span>分享</span>
          </button>
        </div> -->
      </div>
      <div class="max-w-3xl mx-auto">
        <h3 class="text-xl font-medium mb-6">AI诗词对话</h3>
        <div class="bg-gray-50 rounded-lg p-6 mb-8">
          <div id="chat-container" class="h-96 overflow-y-auto mb-4 space-y-4">
            <!-- AI欢迎消息 -->
            <div class="flex justify-start gap-3">
              <div class="ai-avatar">
                <i class="fas fa-brain"></i> <!-- 使用Font Awesome的AI图标 -->
              </div>
              <div class="bg-gray-100 p-3 rounded-lg max-w-[70%]">
                您好！我是诗词AI助手，可以和我讨论这首诗的意境、创作背景、文学手法等内容。
              </div>
            </div>
          </div>
          <!-- 输入框 -->
          <div class="flex gap-2">
            <input type="text" id="ai-input"
              class="flex-1 border border-gray-300 p-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
              placeholder="输入您的问题...">
            <button id="ai-send"
              class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-secondary transition-colors">
              发送
            </button>
          </div>
        </div>

        <h3 class="text-xl font-medium mb-6">热门评论</h3>
        <div class="space-y-8" id="pl">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-medium">全部评论 (0)</h3>
            <div class="flex gap-4">
              <button
                class="flex items-center gap-2 text-gray-500 hover:text-primary transition-colors !rounded-button">
                <i class="fas fa-sort-amount-down"></i>
                <span>最新</span>
              </button>
              <button
                class="flex items-center gap-2 text-primary hover:text-secondary transition-colors !rounded-button">
                <i class="fas fa-fire"></i>
                <span>最热</span>
              </button>
            </div>
          </div>
          <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex gap-4" style="text-align: center;">
              <a style="width: 100%; text-align: center; font-weight: 800; font-size: 20px;">评论区还透着丝丝静谧,亟待您的高见打破...</a>
            </div>
          </div>
        </div>
      </div>

      <div class="bjzp w-[380px] bg-white rounded-lg shadow-lg p-6">
        <div class="flex items-center justify-between mb-8">
          <button class="text-gray-400 hover:text-gray-500 transition-colors">
            <i class="fas fa-times text-xl"></i>
          </button>
        </div>
        <form class="space-y-6">
          <div>
            <div class="relative">
              <textarea
                class="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-gray-900 min-h-[60px]"
                style=" resize: none" placeholder="回复评论..." id="replk"></textarea>
            </div>
          </div>
          <div class="pt-6">
            <button id="xgzp" data-id="0"
              class="w-full bg-primary text-white px-6 py-3 rounded-md hover:bg-primary/90 transition-colors font-medium !rounded-button whitespace-nowrap">
              提交评论
            </button>
          </div>
        </form>
      </div>
    </main>

    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 plk">
      <div class="max-w-[1440px] mx-auto px-8 py-4">
        <div class="flex items-center gap-4">
          <button class="text-gray-500 hover:text-primary transition-colors !rounded-button">
            <i class="far fa-smile text-xl"></i>
          </button>
          <input type="text" placeholder="写下你的评论..."
            class="flex-1 h-12 px-4 border border-gray-200 !rounded-button focus:outline-none focus:border-primary"
            id="pltext">
          <button class="text-gray-500 hover:text-primary transition-colors !rounded-button">
            <i class="far fa-image text-xl"></i>
          </button>
          <button class="bg-primary text-white px-6 py-2 !rounded-button hover:bg-secondary transition-colors"
            id="tjpl">
            发送
          </button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="../../../node_modules/lodash/lodash.js"></script>
  <script src="../../utils/auth.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.min.js"></script>
  <script src="../../utils/request.js"></script>
  <script src="../../utils/alert.js"></script>
  <script src="./index.js"></script>
  <script>
    // 新增AI对话功能脚本
    const chatContainer = document.getElementById('chat-container');
    const aiInput = document.getElementById('ai-input');
    const aiSend = document.getElementById('ai-send');

    // 发送消息处理
    async function sendMessage() {
      const message = aiInput.value.trim();
      if (!message) return;

      // 添加用户消息
      addMessage(message, 'user');
      const data = await getAIResponse(message)
      addMessage(data, 'ai');
      aiInput.value = '';
    }

    // 添加消息到对话框
    async function addMessage(text, sender) {
      const messageDiv = document.createElement('div');
      messageDiv.className = `flex gap-3 ${sender === 'user' ? 'justify-end' : 'justify-start'}`;

      if (sender === 'ai') {
        messageDiv.innerHTML = `
        <div class="ai-avatar">
          <i class="fas fa-brain"></i>
        </div>
        <div class="bg-gray-100 p-3 rounded-lg max-w-[70%]">
          ${text}
        </div>
      `;
      } else {
        messageDiv.innerHTML = `
        <div class="bg-primary text-white p-3 rounded-lg max-w-[70%]">
          ${text}
        </div>
      `;
      }

      chatContainer.appendChild(messageDiv);
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    // 模拟AI响应（实际应连接后端API）
    async function getAIResponse(question) {
      const res = await axios({
        url: '/getPoemRelated',
        params: {
          promt: question,
          content: document.querySelector('#qwer').innerHTML
        }
      })
      return res.msg
      /* const responses = {
        "背景": "《春江花月夜》创作于初唐时期，是七言歌行的代表作。诗人张若虚以扬州长江畔为背景，通过月夜美景引发对宇宙人生的哲理思考。",
        "意象": "本诗运用了春江、明月、花林、流霜等多重意象，构建出澄澈空明的审美意境。其中'江畔何人初见月？江月何年初照人？'体现了对时空永恒的哲学思考。",
        "手法": "诗歌采用移情于景、时空交错的表现手法，通过'月'的意象贯穿全篇，形成回环往复的韵律美。",
        "default": "这首诗通过描绘春江月夜的美景，表达了诗人对宇宙永恒和人生短暂的哲学思考。其中'人生代代无穷已，江月年年只相似'体现了生命轮回与自然永恒的对立统一。"
      };

      return Object.keys(responses).find(key => question.includes(key))
        ? responses[Object.keys(responses).find(key => question.includes(key))]
        : responses.default; */
    }

    // 事件监听
    aiSend.addEventListener('click', sendMessage);
    aiInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') sendMessage();
    });
  </script>
</body>

</html>